<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仁爱宠物医院</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  a {
    text-decoration: none;
  }

  .home_div {
    width: 70%;
    height: 85%;
    margin: auto;
    margin-top: 3%;
    padding: 2% 5%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, .2);
  }

  #addgoods {
    height: 100vh;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<body>
  <div id="addgoods">
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item><span style="font-size: 20px; font-weight: 700;">宠物仁爱医院管理端</span></el-menu-item>
      <el-menu-item><a href="./home.html">首页</a></el-menu-item>
      <el-menu-item><a href="./user.html">会员管理</a></el-menu-item>
      <el-menu-item><a href="./goods.html">商品管理</a></el-menu-item>
      <el-menu-item><a href="./order.html">订单管理</a></el-menu-item>
      <el-menu-item><a href="./userinfo.html">个人信息</a></el-menu-item>
      <el-menu-item><a href="./message.html">留言管理</a></el-menu-item>
      <el-menu-item><a href="./contact.html">联系我们</a></el-menu-item>
      <el-menu-item><a href="./login.html">退出登录</a></el-menu-item>
    </el-menu>
    <div class="home_div">
      <div style="color: #000; margin-bottom: 2%;"><a href="./goods.html">&lt;返回</a></div>
      <h3>新增商品</h3>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名" prop="name">
          <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="img">
          <el-upload class="avatar-uploader" :action="url+'/upload'" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="url+'/download/'+imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品说明" prop="notes">
          <el-input type="text" v-model="ruleForm.notes"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="inventory">
          <el-input type="text" v-model="ruleForm.inventory"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="ruleForm.goodtype" placeholder="商品类型">
            <el-option label="睡垫" value="睡垫"></el-option>
            <el-option label="玩具" value="玩具"></el-option>
            <el-option label="衣服" value="衣服"></el-option>
            <el-option label="项圈" value="项圈"></el-option>
            <el-option label="沐浴露" value="沐浴露"></el-option>
            <el-option label="零食" value="零食"></el-option>
            <el-option label="猫包" value="猫包"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input type="text" v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#addgoods',
    data() {
      return {
        imageUrl: '',
        ruleForm: {},
        url: 'http://localhost:8082/common'
      };
    },
    created(){
      // 要先确保用户已经登录
      if(localStorage.getItem("userId") == null){
        // 表示没有登录，跳转到登录页面
        window.location.href = './login.html';
        return;
      }
    },
    methods: {
      // 新增商品
      async submitForm(){
        this.ruleForm.img = this.imageUrl;
        if(this.ruleForm.name == "" || this.ruleForm.inventory == "" || this.ruleForm.notes == "" || this.ruleForm.img == ""){
          this.$message.error("请填写完整在提交！");
          return;
        }
        const { data: result } = await this.$http.post('http://localhost:8082/goods/insert',this.ruleForm);
        if(result.flag){
          this.$message.success(result.message);
        }else {
          this.$message.error(result.message);
        }
        // 跳转到商品管理页面
        window.location.href='./goods.html';
      },
      // 上传图片成功时
      handleAvatarSuccess(res, file) {
        this.imageUrl = res.data;
      },
      // 取消时
      resetForm(){
        this.ruleForm = {};
      }
    }
  })
</script>

</html>